<template>
	<div id="lineup">
		<!--alert-->
		<div>
			<alert v-model="alertShow" :title="alertTitle" @on-show="onShow" @on-hide="onHide"> {{alertInner}}</alert>
		</div>
		<div class="wait" v-for="val in list2">
			<div class="yuyue-title">
				等候中
			</div>
			<div class="inner">
				<div class="item">
					<span>身份证号：</span>
					<p>{{val.code}}</p>
				</div>
				<div class="item">
					<span>排队序号：</span>
					<p>{{val.full_sequence}}</p>
				</div>
				<div class="item">
					<span>剩余人数：</span>
					<p>{{val.sort_index}}</p>
				</div>
			</div>
		</div>
		<div class="yuyue" v-for="(val) in list1">
			<div class="yuyue-title">
				预约
			</div>
			<div class="inner">
				<div class="item">
					<span>预约日期：</span>
					<p>{{val.creation_time.substring(0,10)}}</p>
				</div>
				<div class="item">
					<span>预约时间：</span>
					<p>{{val.group_schedule_begin_time+"-"+val.group_schedule_end_time}}</p>
				</div>
				<div class="item">
					<span>身份证号：</span>
					<p>{{val.code}}</p>
				</div>
				<!--<div class="btn">
					<button  @click="reload(val.id)">我要取号</button>
				</div>-->
			</div>
		</div>

		<!--我要预约-->
		<div class="bottomBtn">
			<button @click="jump" v-show="btnVshow" >我要预约</button>
		</div>
	</div>
</template>

<script>
	import  Alert  from 'vux/src/components/alert/index.vue'
	export default {
		
		components: {
			Alert
		},
		data() {
			return {
				/*身份证*/
				IDcard: "",
				/*预约日期*/
				reservation: "",
				/*预约时间*/
				appointment: "",
				/*排队序号*/
				queuingNumber: "",
				/*剩余人数*/
				surplus: "",
				list1: [],
				list2: [],
				/*alert*/
				alertShow: false,
				alertTitle: "",
				alertInner: "",
				/*是否有数据*/
				isAjaxShow: "",
				btnVshow:false

			}
		},
		created() {
			document.title = '我的预约';
			
			let locasfzh = localStorage.getItem("sfzh");
			if(!locasfzh) {
				this.btnVshow = false;
				this.$router.replace({
					path: "/make"
				})
			}
			this.$ajax.post("/xzjh/phone", {
				code: locasfzh
			}).then((res) => {
				
				this.list1 = res.data.yuyue;
				this.list2 = res.data.dengdai;

				if(this.list1 == undefined && this.list1 == undefined) {
					this.btnVshow = false;
					this.$router.replace({
						path: "/make"
					})
				}else{
					this.btnVshow = true;
				}
			}, (err) => {

			})
		},
		methods: {
			reload(id) {
				this.$ajax.post("/xzjh/enqueue", {
					id: id
				}).then((res) => {
					if(res.data.description) {
						let arr = res.data.description;
						this.alertTitle = "错误";
						this.alertInner = arr;
						this.alertShow = true;
					} else {
						location.reload();
					}
				})
			},
			jump() {
				this.$router.push({
					path: "/make"
				})
			},
			onShow() {

			},
			onHide(type) {

			},
		}
	}
</script>

<style lang="scss" scoped>
	#lineup {
		padding: 22px 15px;
		.yuyue,
		.wait {
			width: 100%;
			height: 203px;
			background: url(wait.png) 0 0 no-repeat;
			background-size: 100% 203px;
			position: relative;
			margin-bottom: 20px;
			.yuyue-title {
				height: 52px;
				line-height: 52px;
				background: url(yuyue-icon1.png) 20px center no-repeat;
				background-size: 18px 18px;
				color: #fff;
				font-size: .36rem;
				box-sizing: border-box;
				padding-left: 50px;
			}
			.inner {
				height: 151px;
				display: flex;
				justify-content: space-between;
				padding: 30px 0 30px 30px;
				box-sizing: border-box;
				flex-direction: column;
				font-size: .32rem;
				.item {
					span {
						color: #666;
					}
					display: flex;
				}
				.btn {
					position: absolute;
					right: 10px;
					bottom: 5px;
					button {
						color: #166AD2;
						background-color: transparent;
					}
				}
			}
		}
		.wait {
			background: url(yuyue.png) 0 0 no-repeat;
			background-size: 100% 203px;
			.yuyue-title {
				background: url(wait-icon1.png) 20px center no-repeat;
				background-size: 18px 18px;
			}
		}
		.bottomBtn {
			button {
				width: 100%;
				height: 44px;
				line-height: 44px;
				color: #fff;
				text-align: center;
				background-color: #166ad2;
				border-radius: 4px;
				font-size: 18px;
			}
		}
	}
</style>